<template>
	<view>
		<view class="list">
			<view 
				class="item tp-w690"
				v-for="(item,index) in list"
				:key="index"
			>
				<view class="l-wrap">
					<view class="price"><text style="font-size: 32rpx;">￥</text>{{item.amount}}</view>
					<view class="tip" v-if="item.useScene==1">满{{item.fullAmount}} - {{item.amount}}</view>
					<view class="tip" v-else>无门槛</view>
					<view class="btn" @click="handleChooseBusCoupon(item)">立即使用</view>
				</view>
				<view class="r-wrap">
					<view class="other-wrap" v-if="false">
						<image class="icon" src="./static/merchant-icon.png" mode=""></image>
						<view class="txt">{{item.couponName}}</view>
					</view>
					<view class="name">{{item.couponName}}</view>
					<view class="date">有效期：{{item.beginTime}} — {{item.endTime}}</view>
					<view class="date useof" v-if="true">使用范围：{{item.bound}}</view>
					
				</view>
				
				<uni-icons @click="handleGoCouponDetail(item)" class="help-icon" type="help" size="20" color="#FFAF3C"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				couponInfo: {}
			};
		},
		onLoad(opt) {
			this.couponInfo = opt && opt.couponInfo && JSON.parse(opt.couponInfo)
			this.getBusCouponList()
		},
		methods: {
			handleChooseBusCoupon(item) {
				this.$store.commit('upChoosedBusCoupon', item)
				uni.navigateBack({delta: 1});
			},
			getBusCouponList() {
				const {type, totalPrice,shopId} = this.couponInfo
				this.$http.get(this.$api.getCouponList, {type, totalPrice , shopId}).then(res => {
					if (res.code === 200) {
						this.list = res.data
					}
				})
			},
			handleGoCouponDetail({couponId}) { // 跳转到优惠券说明
				uni.navigateTo({
					url: './couponDetail?id=' + couponId
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.list {
	.item {
		margin-top: 20rpx;
		display: flex;
		background-color: #fff;
		position: relative;
		&::before,&::after {
			content: '';
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: #f5f5f5;
		}
		&::before {
			left: -10rpx;
		}
		&::after {
			right: -10rpx;
		}
		.help-icon {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 1;
		}
		.l-wrap {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 40rpx 0;
			justify-content: space-between;
			background-color: #FF660A;
			color: #fff;
			margin-right: 39rpx;
			width: 200rpx;
			.price {
				font-size: 48rpx;
				font-weight: 500;
				line-height: 1;
			}
			.tip {
				font-size: 24rpx;
				margin-top: 24rpx;
			}
			.btn {
				width:160rpx;
				height:48rpx;
				line-height: 48rpx;
				text-align: center;
				border:1px solid #fff;
				border-radius:24rpx;
				color: #fff;
				margin-top: 38rpx;
			}
		}
		.r-wrap {
			display: flex;
			flex-direction: column;
			.other-wrap {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				margin: 42rpx 0 12rpx;
				.icon {
					margin-right: 14rpx;
					height: 27rpx;
					width: 27rpx;
				}
			}
			.name {
				font-size: 28rpx;
				font-weight: 500;
				margin-top: 40rpx;
				line-height: 1;
			}
			.date {
				font-size: 22rpx;
				color: #666;
				margin: 20rpx 0 0;
				line-height: 1;
				&.useof {
					margin-top: 34rpx;
					line-height: 36rpx;
				}
			}
			.btn {
				width:160rpx;
				height:48rpx;
				line-height: 48rpx;
				text-align: center;
				border:1px solid $red;
				border-radius:24rpx;
				color: $red;
			}
		}
	}
}
</style>
